@import './variables';
@import './base';

//main-container全局样式
.page-main{
  // margin: 24px 24px 24px 24px;
  height:100%;
  background-color: white;
  border-radius: 2px;
  &.avue-view{padding:0;width:auto;}
  .header{
    border-bottom: 1px solid whitesmoke;
    display: flex;
    justify-content: space-between;
    padding:10px 0;
    .title{
      font-size: 18px;
      color: $titleColor;
      font-weight:bold;
      line-height: 40px;
      margin-left: 20px;
      margin-bottom: 0;
    }
    .tool{
      margin-right: 20px;
      line-height: 40px;
    }
  }
}
@media screen and (max-width: 786px) {
  .page-main{
    .header{
      display:block;
      .tool{margin:0 20px;}
    }
  }
}
.form-search{
  padding-bottom:10px;
  .el-form--inline .el-form-item{
    margin-bottom:15px;margin-right:0px;height:32px;
  }
  .el-form--inline{
    .el-form-item{display:flex;}
    .el-form-item__content{display:block;flex:1;}
    .el-cascader{display:block;}
    .el-select,.el-date-editor--daterange.el-input__inner{width:100%;}
    
  }
  .search-cascader{
    .el-input .el-input__inner{height:32px!important;}
  }
  // .el-button--default{
  //   border-color:$mainColor;color:$mainColor;
  //   &:hover{
  //       border-color:$mainColor;
  //   }
  // }
}
.main-container{
  background:#f0f2f5;
}
.app-container {
  // padding: 24px;
  // margin: 24px;
  border-radius: 2px;
  background:#fff;
  position:relative;
  &+.app-container{
    margin-top:20px;
  }
  .avue-crud__menu{
    position:absolute;
    top:-46px;
    right:30px;
    width: auto;
    // display:none !important;
    .avue-crud__right{
      display:none;
    }
  }
}


.layout-lr{
  .flex-wrap{
    @extend .flex-block;align-items: stretch;height:100%;
    .content-wrap{
      flex:1;overflow:hidden;text-align:center;height:100%;
      .el-scrollbar__view{padding-right:20px;}
    }
  }
  .el-scrollbar{
    overflow-y: auto;
  }
  .el-scrollbar__wrap{overflow-x: hidden;}
  .form-search{  
     width:400px;margin-left:0px;border-left:1px solid #dee2e6;
    .el-form .el-form-item{
      height:auto;
      .el-button{margin: 0 8px 8px 0;}
    }
  }
  .collapse-search{
    position:absolute;z-index:10;right:0;top:50%;transform:translateY(-50%);padding:16px 2px;background:$mainColor;color:#fff;border-radius:4px 0 0 4px;cursor:pointer;
  }

}



.mapboxgl-map{
  .mapboxgl-control-container{display:none;}
  .mapboxgl-ctrl-attrib{
    position:absolute;bottom:0;right:0;background:rgba(255,255,255,.5);padding:0 5px;
  }
}

.page-lionbay{
  height:100%;
  .content-wrap{position: relative;
    // &.crosshair{
    //   cursor: crosshair;
    // }
  }
  h3{
    background:#e3effc;
    padding:0.5rem 1rem;
    margin: 0;
    margin-bottom:1rem;
    text-align:center;
    border-bottom:1px solid #dee2e6;
    font-size:14px;
  }
  .el-form{
    padding:0.5rem 3rem;
    .el-button--primary{
      background:#1890ff;
      border-color:#1890ff;
    }
  }
  .tips{
    position:absolute;right:20px;bottom:20px;width:300px;padding:8px;border-radius:4px;
    background:rgba(255, 255, 255, 0.7);
    .hd{
      font-size:14px;font-weight:bold;text-align: left;
    }
    .bd{
      padding:10px 0 5px 0;
    }
    .ft{
      display:flex;justify-content: space-between;font-size:12px;
    }
  }
  .notice{
    position:absolute;left:50%;top:10px;padding:8px 16px;border-radius:4px;transform:translateX(-50%);color:red;background:rgba(255, 255, 255, 0.7);
  }
  .popover-layers{
    position:absolute;top:10px;right:10px;z-index:10;
  }
}
.popover-style{
  position:absolute;top:10px;left:10px;z-index:10; 
  .btn{
    overflow:hidden;
    border-radius: 4px;
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0 , 0.3);
    background:#fff;
    text-align:center;
    font-size:12px;
    cursor: pointer;
    position:relative;
    img{float:left;}
    .tag{
      position:absolute;bottom:0px;right:0px;z-index:2;
    }
  }
}
.popover-list{
  .item{text-align:center;}
  .img{
      // width:80px;
      height:60px;
      overflow:hidden;
      border-radius: 4px;
      border: 2px solid #fff;
      box-shadow: 0 1px 5px rgba(0, 0, 0 , 0.3);
      cursor: pointer;
      &.active {
          border-color: #2749b7;
      }
      img{margin:0 auto;}
    }
}
.drawer-point,.echarts-region{
  .el-drawer__body{overflow:hidden;}
}